<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><OfficeBuilding /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalRooms }}</div>
              <div class="stat-label">会议室总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon available">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.availableRooms }}</div>
              <div class="stat-label">可用会议室</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon booking">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.todayBookings }}</div>
              <div class="stat-label">今日预约</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon user">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalUsers }}</div>
              <div class="stat-label">注册用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>今日预约情况</span>
            </div>
          </template>
          <div class="booking-chart">
            <div ref="bookingChartRef" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>会议室使用率</span>
            </div>
          </template>
          <div class="usage-chart">
            <div ref="usageChartRef" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近预约记录</span>
              <el-button type="primary" @click="$router.push('/booking/list')">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentBookings" style="width: 100%">
            <el-table-column prop="roomName" label="会议室" width="150" />
            <el-table-column prop="userName" label="预约人" width="120" />
            <el-table-column prop="startTime" label="开始时间" width="180" />
            <el-table-column prop="endTime" label="结束时间" width="180" />
            <el-table-column prop="purpose" label="用途" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { OfficeBuilding, Check, Calendar, User } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

// 统计数据
const stats = ref({
  totalRooms: 12,
  availableRooms: 8,
  todayBookings: 15,
  totalUsers: 156
})

// 最近预约记录
const recentBookings = ref([
  {
    id: 1,
    roomName: '会议室A',
    userName: '张三',
    startTime: '2024-01-15 09:00',
    endTime: '2024-01-15 11:00',
    purpose: '项目讨论会议',
    status: 'confirmed'
  },
  {
    id: 2,
    roomName: '会议室B',
    userName: '李四',
    startTime: '2024-01-15 14:00',
    endTime: '2024-01-15 16:00',
    purpose: '客户洽谈',
    status: 'pending'
  },
  {
    id: 3,
    roomName: '会议室C',
    userName: '王五',
    startTime: '2024-01-15 10:00',
    endTime: '2024-01-15 12:00',
    purpose: '团队建设',
    status: 'completed'
  }
])

const bookingChartRef = ref()
const usageChartRef = ref()

// 获取状态类型
const getStatusType = (status: string) => {
  const types: Record<string, string> = {
    confirmed: 'success',
    pending: 'warning',
    completed: 'info',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    confirmed: '已确认',
    pending: '待确认',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || '未知'
}

// 初始化预约图表
const initBookingChart = () => {
  const chart = echarts.init(bookingChartRef.value)
  const option = {
    title: {
      text: '今日预约时段分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
    },
    yAxis: {
      type: 'value',
      name: '预约数量'
    },
    series: [
      {
        name: '预约数量',
        type: 'bar',
        data: [3, 5, 2, 0, 1, 4, 6, 3, 2, 1],
        itemStyle: {
          color: '#409EFF'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化使用率图表
const initUsageChart = () => {
  const chart = echarts.init(usageChartRef.value)
  const option = {
    title: {
      text: '会议室使用率',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '使用情况',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 8, name: '可用' },
          { value: 4, name: '使用中' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

onMounted(() => {
  nextTick(() => {
    initBookingChart()
    initUsageChart()
  })
})
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;
}

.stat-card {
  .stat-content {
    display: flex;
    align-items: center;

    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      background: #409EFF;
      color: white;
      font-size: 24px;

      &.available {
        background: #67C23A;
      }

      &.booking {
        background: #E6A23C;
      }

      &.user {
        background: #F56C6C;
      }
    }

    .stat-info {
      .stat-number {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        line-height: 1;
      }

      .stat-label {
        font-size: 14px;
        color: #909399;
        margin-top: 5px;
      }
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>